<template>
  <div class="app-container">
    <!-- <el-button type="text" @click="dialogVisible = true">添加</el-button> -->
    <!-- <el-card shadow="never"> -->
    <!-- <div slot="header" style="text-align: center;">店铺列表</div> -->
    <!-- 店铺店铺列表-->
    <el-button style="margin-bottom: 12px" type="success" @click="addmodel">添加</el-button>
    <div class="tableClass">
      <el-table :data="formdata" v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border
        style="width: 100%;">
        <el-table-column align="center" prop="id" label="序号" />
        <el-table-column align="center" prop="name" label="促销名称" />
        <el-table-column align="center" prop="type" label="类型">
           <template slot-scope="scope">
             <div v-if="scope.row.type == 'reduce'">满减</div>
             <div v-else>暂无类型</div>
           </template>
        </el-table-column>
        <el-table-column align="center" prop="satisfy_amount" label="满金额" />
        <el-table-column align="center" prop="reduce_amount" label="减金额" />
        <el-table-column align="center" prop="start_time" label="开始时间" />
        <el-table-column align="center" prop="end_time" label="截止时间" />
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <el-select v-model="scope.row.status" @change="changStatus(scope.row.id)">
              <el-option v-for="opt in options" :key="opt.id" :value="opt.id" :label="opt.label" />
            </el-select>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="name" label="排序" />-->
        <el-table-column label="操作" align="center" width="230px">
          <template slot-scope="scope">
            <!-- scope.row 获取整行信息 表示当前单元格 #ff9900ba-->
            <el-button class="btnAppeal" size="small" type="warning" @click="updateMsg(scope.row)">修改</el-button>
            <el-button class="btnAppeal" size="small" type="danger" @click="delMsg(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页 -->
      <div style="text-align: center;">
        <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize" :total="totalusers" />
      </div>
    </div>
    <!-- </el-card> -->


    <!-- 添加模态款 -->
    <el-dialog :title="title" :visible.sync="modelMsg" :close-on-click-modal="false">
      <div class="msgDiv">
        <!-- <h3>店铺基础信息</h3> -->
        <div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item v-show="vshow" label="序号">
              <el-input v-model="form.id" disabled></el-input>
            </el-form-item>
            <!-- <el-form-item label="选择门店" :required="true" style="text-align: left;">
              <div>
                <el-select v-model="form.merchant_id" filterable placeholder="请选择门店">
                  <el-option v-for="item in orderList" :key="item.id" :value="item.id" :label="item.name">
                  </el-option>
                </el-select>
              </div>
            </el-form-item> -->
            <el-form-item label="促销名称" :required="true">
              <el-input v-model="form.name" placeholder="请输入促销规则名称"></el-input>
            </el-form-item>
            <el-form-item label="满足金额"  :required="true">
              <el-input v-model="form.satisfy_amount" placeholder="请输入满足金额"></el-input>
            </el-form-item>
            <el-form-item label="减去金额"  :required="true">
              <el-input v-model="form.reduce_amount" placeholder="请输入减去金额"></el-input>
            </el-form-item>
            <el-form-item label="状态" :required="true" style="text-align: left;line-height: 40px;">
              <el-select v-model="form.status">
                <el-option v-for="opt in options" :key="opt.id" :value="opt.id" :label="opt.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" :required="true" style="text-align: left;">
              <el-date-picker  style="width: 100%;" v-model="newtime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
              </el-date-picker>
            </el-form-item>


            <el-button type="success" @click="addMsg(form)">{{addORupdate}}</el-button>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modelMsg: false,
        form: {
          id: "",
          name: "",
          satisfy_amount: "", //满足金额
          reduce_amount: "", //减去金额
          start_time: "",
          end_time: "",
          status: "1",
          // merchant_id: "", //店铺id
        },
        // orderList:[],
        newtime: [],
        options: [{
          id: 0,
          label: "关闭"
        }, {
          id: 1,
          label: "开启"
        }],
        vshow: false,
        loading: false,
        title: "",
        addORupdate: "",
        formdata: [],
        totalusers: 0, //总行数
        pageSize: 5, //每页几行
        startpage: 1, //起始页
      }
    },
    mounted() {
      this.getDiscountSalesRule()
      /*this.getMerchantList()*/
    },
    methods: {
      //手动改变状态
      changStatus(id) {
        let params = {
          "id": id
        }
        this.$api.changeDiscountSalesRuleStatus(params).then(res => {
          console.log(res)
          this.$message({
            type: res.data.level,
            message: res.data.message
          });
          this.getDiscountSalesRule()
        })
      },
      //获取门店列表
      // getMerchantList(){
      //   let params = {
      //     "page": 1,
      //     "limit":10000
      //   }
      //   //调用后台提供的接口方法
      //   this.$api.getMerchantList(params).then(res => {
      //     console.log(res.data.data)
      //     if (res.data.level == "success") {
      //       this.orderList = res.data.data
      //     }
      //   })
      // },
      //获取分页列表
      getDiscountSalesRule() {
        let params = {
          "page": this.startpage,
          "limit": this.pageSize
        }
        //调用后台提供的接口方法
        this.$api.getDiscountSalesRule(params).then(res => {
          console.log(res.data.data)
          if (res.data.level == "success") {
            this.formdata = res.data.data
            this.totalusers = res.data.page_info.total
            this.loading = false
          }else {
            this.$message.error(res.data.message)
             this.loading = false
          }

        })
      },
      //分页 pageChange当前页发生改变触发函数
      async pageChange(page) {
        this.startpage = page
        this.loading = true
        //调用获取列表的方法
        this.getDiscountSalesRule()
      },
      addmodel() {
        this.modelMsg = true
        this.title = '添加促销规则'
        this.addORupdate = "添加",
          this.vshow = false
          this.form.id = "",
          this.form.name = "",
          this.form.satisfy_amount = "",
          this.form.reduce_amount = "",
          this.form.start_time = "",
          this.form.end_time = "",
          this.newtime = []
          this.form.status = 1
          // this.form.merchant_id = ""
      },
      //提交店铺入驻申请
      async addMsg(form) {
        console.log(form)

        //时间赋值
          this.form.start_time = this.newtime[0]
          this.form.end_time = this.newtime[1]

        if(!this.form.end_time||!this.form.start_time){
          this.$message({
            message: "请选择活动时间段",
            type: "warning"
          })
          return false;
        }

        //判断带星号的是否为空
        if (((form.name && form.satisfy_amount && form.reduce_amount ) == "")) {
          this.$message({
            message: "带星号为必填项，请完善信息！",
            type: "warning"
          })
          return false;
        }

        /* 显示加载中。。。 */
        const loadingOne = this.$loading({

          lock: true,
          text: '保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        if (form.id > 0) {
          /* 修改 */

          console.log(form)
          await this.$api.setDiscountSalesRule(form).then(res => {
            console.log(res)
            this.$message({
              type: res.data.level,
              message: res.data.message
            });
            if (res.data.level == "success") {
              this.getDiscountSalesRule()
              loadingOne.close()
              this.modelMsg = false
            } else {
              this.modelMsg = true
              loadingOne.close()
            }

          })
        } else {
          /* 添加 */
          await this.$api.setDiscountSalesRule(form).then(res => {
            this.$message({
              type: res.data.level,
              message: res.data.message
            });
            if (res.data.level == "success") {
              this.getDiscountSalesRule()
              loadingOne.close()
              this.modelMsg = false
            } else {
              this.modelMsg = true
              loadingOne.close()
            }

          })
        }
        this.modelMsg = false

      },
      //修改弹出框
      async updateMsg(row) {
        this.newtime = []
        this.modelMsg = true
        this.title = '修改促销规则'
        this.addORupdate = "修改",
          this.vshow = true
          this.form.id = row.id,
          this.form.name = row.name
          this.form.satisfy_amount = row.satisfy_amount
          this.form.reduce_amount = row.reduce_amount
          this.form.start_time = row.start_time
          this.form.end_time = row.end_time
          this.form.status = row.status
    //       this.form.merchant_id = parseInt(row.merchant_id)
		  // console.log( " this.form.merchant_id=="+row.merchant_id)
          //时间赋值
          if(this.form.start_time !=null && this.form.end_time !=null){
            this.newtime.push(row.start_time)
            this.newtime.push(row.end_time)
          }
      },
      //删除店铺信息
      async delMsg(id) {
        let delid = {
          id: id
        }
        await this.$confirm('确定要删除此促销规则吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const loadingOne = this.$loading({
            lock: true,
            text: '保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$api.delDiscountSalesRule(delid).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            if (res.data.level == "success") {
              loadingOne.close()
              this.getDiscountSalesRule()
            } else {
              this.$message.error(res.data.message)
              loadingOne.close()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style scoped="scoped">
  /deep/.el-card__header {
    background-color: #409EFF;
    color: whitesmoke;
  }

  /deep/.el-dialog {
    margin-top: 10vh !important;
    width: 33%;
  }

  .msgDiv {
    width: 80%;
    margin: auto;
    text-align: center;
  }

  .el-input {
    display: flex;
    flex-grow: <2>;
  }
</style>
